<template>
  <div id="Form">
    <el-form
        ref="ruleFormRef"
        label-position="right"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="60px"
        class="ruleForm"
    >
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机：" prop="phone">
        <el-input v-model.number="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="密码：" prop="pass">
        <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="ID：" prop="deviceID">
        <el-input v-model="ruleForm.deviceID" />
      </el-form-item>
      <el-form-item label="QQ：" prop="qq">
        <el-input v-model.number="ruleForm.qq" />
      </el-form-item>
      <el-form-item label="城市：" prop="city">
        <el-cascader
            style="width: 100%"
            placeholder="请选择地区"
            size="default"
            :options="regionData"
            v-model="ruleForm.selectedOptions"
            @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交注册</el-button>
        <el-button @click="resetForm(ruleFormRef)">清空内容</el-button>
      </el-form-item>
      <el-progress :percentage="info.percentage" :status="info.isStatus" :text-inside="true" :stroke-width="24"/>
      <el-alert title="提交成功" type="success" show-icon v-if="info.info==='success'" style="width: 100%;float: right"/>
      <el-alert title="提交失败" type="error" show-icon v-else-if="info.info==='error'" style="width: 100%;float: right" />
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import qs from 'qs'
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { regionData } from 'element-china-area-data'
import axios from "axios";

var info=reactive({
  info:'',
  percentage:0,
  isStatus:'',
  isname:0,
  isphone:0,
  ispass:0,
  isdev:0,
  isqq:0,
  isarea:0
})
const ruleFormRef = ref<FormInstance>()
const handleChange = (value) => {
  if(info.isarea==0){
    info.percentage+=25
    info.isarea=1
  }
  if(info.percentage==100)info.isStatus='success'
  console.log(value)
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.selectedOptions=''
  info.info=''
  info.percentage=0
  info.isStatus=''
  info.isname=0
  info.isphone=0
  info.ispass=0
  info.isdev=0
  info.isqq=0
  info.isarea=0
}

const checkName = (rule: any, value: any, callback: any,) => {
  if (!value) {
    return callback(new Error('请输入姓名'))
  }else{
    if(info.isname==0){
      info.percentage+=15
      info.isname=1
    }if(info.percentage==100)info.isStatus='success'
    callback()
  }
}
const checkPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入手机号'))
  }else{
    if(info.isphone==0){
      info.percentage+=15
      info.isphone=1
    }if(info.percentage==100)info.isStatus='success'
    callback()
  }
}
const checkPass = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入密码'))
  } else {
    if(info.ispass==0){
      info.percentage+=15
      info.ispass=1
    }if(info.percentage==100)info.isStatus='success'
    callback()
  }
}
const checkDeviceID = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入DeviceID'))
  } else {
    if(info.isdev==0){
      info.percentage+=15
      info.isdev=1
    }if(info.percentage==100)info.isStatus='success'
    callback()
  }
}
const checkQQ = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入QQ号'))
  } else {
    if(info.isqq==0){
      info.percentage+=15
      info.isqq=1
    }if(info.percentage==100)info.isStatus='success'
    callback()
  }
}
const ruleForm = reactive({
  name:'',
  phone:'',
  pass: '',
  deviceID:'',
  qq:'',
  selectedOptions:''
})

const rules = reactive({
  name:[{ validator: checkName, trigger: 'blur' }],
  phone:[{ validator: checkPhone, trigger: 'blur' }],
  pass: [{ validator: checkPass, trigger: 'blur' }],
  deviceID:[{ validator: checkDeviceID, trigger: 'blur' }],
  qq:[{validator:checkQQ,trigger:'blur'}],
})


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      info.info='success'
      console.log(info.info)
      const options={
        method: 'POST',
        data:qs.stringify(ruleForm),
        url:'/commit',
      };
      axios(options)
    } else {
      console.log('error submit!')
      return false
    }
  })
}


</script>
<style scoped>
.ruleForm{
  text-align: center;
}
#Form{
  width: 100%;
  margin: auto;
}
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
</style>